<template>
  <div class="container">
    <div class="header flex">
      <div class="item">代码</div>
      <div class="item">个股名称</div>
      <div class="item">最新价</div>
      <div class="item">涨跌幅</div>
      <div class="item">涨跌</div>
    </div>
    <div class="stockBox">
      <transition-group name="slide">
        <div
          class="stockList flex"
          :key="item.stockCode"
          @click="stockDetail(item.stockCode)"
        >
          <div class="item">{{ item.stockCode }}</div>
          <div class="item">{{ item.stockName }}</div>
          <div class="item" :class="item.color">{{ item.current }}</div>
          <div class="item" :class="item.color">{{ item.rise + "%" }}</div>
          <div class="item" :class="item.color">{{ item.toUp }}</div>
        </div>
      </transition-group>
    </div>
  </div>
</template>
<script>
import { clearTimeout } from "timers";
let timer = null;
export default {
  props: {
    values: {
      type: Array,
      default: Array,
    },
  },
  data() {
    return {
      active: 0,
    };
  },
  watch: {
    values() {
      clearTimeout(timer);
      this.active = 0;
      this.startMove();
    },
  },
  computed: {
    item() {
      return this.values.length > 0 ? this.values[this.active] : {};
    },
  },

  mounted() {
    this.startMove();
  },
  methods: {
    stockDetail(stockCode) {
      this.$emit("stockDetail", { stockCode, block: 8 });
    },
    startMove() {
      const len = this.values.length;
      if (len < 2) return;
      timer = setTimeout(() => {
        if (this.active === len) {
          this.active = 0;
        } else {
          this.active += 1;
        }
        this.startMove();
      }, 2000);
    },
  },
};
</script>

<style lang="scss" scoped>
.container .header {
  color: #2a81ad;
}
.container .item {
  &:first-child {
    text-align: left;
    padding-left: 16px;
  }
  &:last-child {
    text-align: right;
    padding-right: 16px;
  }
}
.container .stockList {
  color: #3bacdb;
  &:hover {
    background: #112761;
    cursor: pointer;
  }
  .item {
    &.red {
      color: #e43b3b;
    }
    &.green {
      color: #35c264;
    }
  }
}
.container {
  height: 100%;

  text-align: center;
  line-height: 25px;
  font-size: 16px;
  font-weight: 400;
  margin: 5px 0;
}
.stockBox {
  height: 25px;
  overflow: hidden;
  position: relative;
}
.text {
  width: 100%;
  position: absolute;
  bottom: 0;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s linear;
}
.slide-enter-to,
.slide-leave {
  transform: translateY(0);
  opacity: 1;
}
.slide-enter {
  transform: translateY(50px);
  opacity: 0;
}
.slide-leave-to {
  transform: translateY(-50px);
  opacity: 0;
}

.item {
  width: 20%;
}
</style>
